<template>
  <div class='success-wrapper'>
    <div class='success-header'>
      <img  class='success-header-img' src='@/assets/images/home/successTitle.png'>
    </div>
    <div class='success-container'>
      <div class='success-desc'>
        <div class='success-desc-big'>您已登记成功</div>
        <div class='success-desc-small'>请将此信息和有效证件原件出示给相关工作人员</div>
      </div>
      <div class='success-button'>
        <!-- <div  v-if='flag==0||flag==1' class='success-button-back' @click='backToHome'>返回首页</div> -->
        <!-- <div class='success-button-report' @click='report'>继续上报</div> -->
        <div class='success-info'>登记信息</div>
        <div class='success-time'>{{dateTime}}</div>
      </div>
      <div class='success-info-container'>
        <div class='success-info-wrapper'>
          <div class='success-info-desc'>本人信息</div>
          <div class='success-info-detail'>
            <div class='success-info-detail-item'>
              <div class='success-info-detail-item-title'>姓名</div>
              <div class='success-info-detail-item-content'>{{name}}</div>
            </div>
            <div class='success-info-detail-item'>
              <div class='success-info-detail-item-title'>证件</div>
              <div class='success-info-detail-item-content'>身份证</div>
            </div>
            <div class='success-info-detail-item'>
              <div class='success-info-detail-item-title'>证件号</div>
              <div class='success-info-detail-item-content'>{{idNumber}}</div>
            </div>
            <div class='success-info-detail-item'>
              <div class='success-info-detail-item-title'>联系方式</div>
              <div class='success-info-detail-item-content'>{{phone}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {currentDate} from '@/assets/js/common'
  export default {
    components: {
      
    },
    data () {
      return { 
        // flag: 0,
        dateTime: '',
        name: '',
        idNumber: '',
        phone: ''
      }
    },
    methods: {
      // backToHome() {
      //   // this.$router.push('/servicePlatform')
      // },
      // report() {
      //   this.$emit("success");
      // }   
    },
    created(){
      this.dateTime= currentDate()
      this.name = this.$route.query.name
      this.idNumber = this.$route.query.idNumber.slice(0,5)+ '*********'+ this.$route.query.idNumber.slice(14)
      this.phone = this.$route.query.phone
      console.log(this.$route.query)
    },
  }
</script>

<style lang='less' scoped>
  .success-wrapper {
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: auto;
    font-family: "微软雅黑";
    .success-header {
      width: 100%;
      height: 270px;
      .success-header-img {
        width: 100%;
        height: 100%;
      }
    }
    .success-container {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin-top: 20px;
      .success-desc {
        text-align: center;
        .success-desc-big {
          font-size: 18px;
          font-weight: 700;
        }
        .success-desc-small {
          margin-top: 3px;
          font-size: 14px;
        }
      }
      .success-button {
        margin-top: 15px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .success-info {
          margin-left: 22px;
          color: #239bfe,
        }
        .success-time {
          margin-right: 22px;
          color: #239bfe,
        }
        // .success-button-back {
        //   margin-left: 44px;
        //   width: 138px;
        //   height: 35px;
        //   line-height: 35px;
        //   color: #fff;
        //   font-size: 16px;
        //   border-radius: 18px;
        //   text-align: center;
        //   background-image: linear-gradient(to right, #239bfe , #0bbae0);;
        //   box-shadow: 5px 5px 5px rgb(163, 215, 253);
        // }
        // .success-button-report {
        //   margin-left: 20px;
        //   margin-right: 44px;
        //   width: 138px;
        //   height: 35px;
        //   line-height: 35px;
        //   color: #fff;
        //   border-radius: 18px;
        //   text-align: center;
        //   background-image: linear-gradient(to right, #239bfe , #0bbae0);;
        //   font-size: 16px;
        //   box-shadow: 5px 5px 5px rgb(163, 215, 253);
        // }
      }
      .success-info-container {
        margin-top: 15px;
        position: relative;
        left: 5%;
        width: 90%;
        // height: 155px;
        border: 1px solid rgb(232, 232, 232);
        box-shadow: 5px 5px 5px rgb(232, 232, 232);
        border-radius: 6px;
        .success-info-wrapper {
          margin-top: 8px;
          position: relative;
          left: 3%;
          width: 94%;
          // border: 1px solid green;
          // height: 140px;
          .success-info-desc {
            font-size: 18px;
            font-weight: 500;
            padding-bottom: 3px;
            border-bottom: 1px solid rgb(232, 232, 232);
          }
          .success-info-detail {
            width: 100%;
            .success-info-detail-item {
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              margin-top: 10px;
              margin-bottom: 10px;
              .success-info-detail-item-title {
                width: 40%;

              }
              .success-info-detail-item-content {
                width: 60%;
                
              }
            }
          }
        }
      }
    }
  }
</style>
